<!-- SPDX-License-Identifier: Apache-2.0 -->

<!DOCTYPE html>
<html>
  <head>
    <title>Hyperledger Fabric v1.4 Transactions POC</title>
    <link rel="icon" href="favicon.png" type="image/gif">

    <!-- require jquery and bootstrap scripts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    
    <!-- adding style here -->
    <style type="text/css">
      header{
        background-color: lightgray;
        font-size:20px;
        padding:15px;
      }
      header, .form-group{
        margin-bottom: 3%;
      }
      .form-group{
        width:50%;
      }
      #body{
        margin-left:3%;
        margin-right:3%;
      }
      .form-control{
        margin: 8px;
      }
      #right_header{
        width:20%;
        font-size:15px;
        margin-right:0px;
      }
      #left_header{
        margin-left:0;
        width:40%;
        display:inline-block;
      } 
      #id {
        width:49%;
        display: inline-block;
      }
      table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
      }
      td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
      }
      tr:nth-child(even) {
          background-color: #dddddd;
      }
    </style>
  </head>
  <body ng-app="application" ng-controller="appController">
    <header>
      <div id="left_header">Hyperledger Fabric v1.4 Transactions POC</div>
    </header>

    <div id="body">
      <div class="form-group">
        <a href="transaction_flow.PNG" target="_blank">
          <img src="transaction_flow.PNG" style="width:100%">
        </a>
        <label>Query All Farm Produce in Ledger</label>
        <p><input id="queryAllProduce" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllProduce()"></p>
      </div>
 
      <table id="all_produce" class="table" align="center">

        <tr>
          <th>ID</th>
          <th>Product</th>
          <th>Weight</th>
          <th>Organic</th>
          <th>Location<br>(Longitude, Latitude)</th>
          <th>Timestamp</th>
          <th>Owner</th>
        </tr>

        <tr ng-repeat="produce in all_produce">
          <td>{{produce.Key}}</td>
          <td>{{produce.product}}</td>
          <td>{{produce.weight}}</td>
          <td>{{produce.organic}}</td>
          <td>{{produce.location}}</td>
          <td>{{produce.timestamp}}</td>
          <td>{{produce.holder}}</td>
        </tr>
      </table>

      <div class="form-group">
        <label>Query a Specific Produce by UID</label><br>
        <h5 style="color:red;margin-bottom:2%" id="error_query">Error: Please enter a valid Id</h5>
        
        Enter a ID number: <input id="createName" class="form-control" type="text" placeholder="Ex: 3" ng-model="produce_id">
        <input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="queryProduce()">
      </div>

      <table id="query_produce" class="table" align="center">

        <tr>
          <th>Product</th>
          <th>Weight</th>
          <th>Organic</th>
          <th>Timestamp</th>
          <th>Owner</th>
          <th>Location <br>(Longitude, Latitude)</th>
        </tr>

        <tr>
          <td>{{query_produce.product}}</td>
          <td>{{query_produce.weight}}</td>
          <td>{{query_produce.organic}}</td>
          <td>{{query_produce.timestamp}}</td>
          <td>{{query_produce.holder}}</td>
          <td>{{query_produce.location}}</td>
        </tr>
      </table>

      <div class="form-group">
        <label>Create Produce Record</label>
        <h5 style="color:green;margin-bottom:2%" id="success_create">Successfully added to Ledger! Tx ID: {{create_produce}}</h5>      
        <br>
        Produce id: <input class="form-control" type="text" placeholder="Ex: 6" ng-model="produce.id">
        Product type: <select class="form-control" id="sel1" ng-model="produce.product">
                      <option>Chicken</option>
                      <option>Beef</option>
                      <option>Salmon</option>
                      <option>Oyster</option>
                      <option>Lamb</option>
                      <option>Caviar</option>
                      <option>Pork</option>
                      </select>
        Product weight: <input class="form-control" type=number step=0.01 placeholder="Ex: 1000.32" ng-model="produce.weight">
        Organic: <input class="form-control" type=checkbox checked=checked ng-model="produce.organic">
        Location longitude: <input id="createName" class="form-control" type="text" placeholder="Ex: 28.012" ng-model="produce.longitude"> 
        Location latitude: <input id="createName" class="form-control" type="text" placeholder="Ex: 150.405" ng-model="produce.latitude">
        Timestamp: <input class="form-control" type=datetime-local step=70 ng-model="produce.timestamp">
        Owner name: <input class="form-control" type="text" placeholder="Ex: Sakya" ng-model="produce.holder">
        <input id="createSubmit" type="submit" value="Create" class="btn btn-primary" ng-click="recordProduce()"> 
      </div>

      <div class="form-group">
        <label>Change Product Owner</label><br>
        <h5 style="color:green;margin-bottom:2%" id="success_holder">Successfully updated Ledger! Tx ID: {{change_holder}}</h5>
        <h5 style="color:red;margin-bottom:2%" id="error_holder">Error: Please enter a valid Product Id</h5>
        Enter a ID of the product to transfer ownership: <input class="form-control" name="assetSelect" placeholder="Ex: 1" ng-model="holder.id">
        Enter name of new owner: <input class="form-control" name="assetSelect" placeholder="Ex: Dalio" ng-model="holder.name">
        <input id="transferSubmit" type="submit" value="Change" class="btn btn-primary" ng-click="changeHolder()">
      </div>

    </div>
  </body>
    <!-- requiring the angular page -->
    <script type="text/javascript" src="app.js"> </script>
</html>